<template>
    <div id="contact-us">
        <div class="banner">
            <div class="banner_discribe">
                <div>联系我们</div>
                <div>Contact Us</div>
            </div>
        </div>

        <div class="contact">
            <div class="send-yourword">
                 <div class="title">
                    在线留言
                 </div>
                 <div class="tip">
                    *请填写您的问题或意见，我们将在48小时之内回复您。
                 </div>

                 <div class="controls">
                    <input placeholder="*姓名" class="text-input" type="text">
                    <input placeholder="*姓名" class="text-input" type="text">
                    <input placeholder="*姓名" class="text-input" type="text">
                    <input placeholder="*姓名" class="text-input" type="text">
                    <input placeholder="*姓名" class="text-input" type="text">
                    <input placeholder="*姓名" class="text-input" type="text">
                    <textarea placeholder="请输入你的留言"  class="textarea-input"></textarea>
                    <div class="send-btn">
                        发送
                    </div>
                 </div>
            </div>

            <div class="contact-ways">
                <div class="logo">
                    <img src="/index/logo2.png" alt="">
                </div>
                <div class="teles">
                    <div class="title">
                        电话 :
                    </div>
                    <div class="tele">
                        中 国：+86(0)21 5030 8716
                    </div>
                    <div class="tele">
                        中 国：+86(0)21 5030 8716
                    </div>
                    <div class="tele">
                        中 国：+86(0)21 5030 8716
                    </div>
                </div>

                <div class="emails">
                    <div class="title">
                        邮箱 :
                    </div>
                    <div class="tele">
                        info@fftai.com
                    </div>
                    <div class="tele">
                        info@fftai.com
                    </div>
                    <div class="tele">
                        中 国：+86(0)21 5030 8716
                    </div>
                </div>
            </div>
        </div>
    </div>
   </template>
   
   <script setup lang="ts">
   import { onMounted } from 'vue';
   
   onMounted(()=>{
         
   })
   </script>
   
   <style lang="less" scoped>
   #contact-us{
    background-color: white;
    padding-bottom: 12rem;
    .banner{
        width: 100%;
        height: 0;
        padding-bottom: 40%;
        background-image: url("/index/banner-bg.jpg");
        background-position: top;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;

        .banner_discribe{
            position: absolute;
            left: 10rem;
            bottom: 8rem;
            
            :nth-child(1){
                font-size: 5rem;
                color: white;
            }
            :nth-child(2){
                font-size: 5rem;
                color: white;
            }
        }
    }

    .contact{
        display: flex;
        flex-direction: row;

        .send-yourword{
            // background-color: aqua;
            flex: 1;
            padding: 10rem 0rem 1rem 10rem;
            flex-shrink: 0;
            .title{
                font-size: 3rem;
                opacity: 0.7;
            }
            .tip{
                margin-top: 2rem;
                font-size: 1.6rem;
            }

            .controls{
                display: flex;
                flex-direction: column;
                margin-top: 4rem;
                .text-input{
                    width: 60%;
                    height: 5rem;
                    margin-bottom: 2rem;
                    outline: none;
                    border-radius: 5px;
                    // border:1px solid rgba(0, 0, 0, 0.5);
                    border: none;
                    background-color: rgb(236, 236, 236);
                    padding-left: 2rem;
                    padding-right: 1rem;
                    font-size: 2rem;
                    color: rgb(35, 35, 35);
                }
                .textarea-input{
                    width: 80%;
                    height: 12rem;
                    padding:2rem;
                    outline: none;
                    border:none;
                    border-radius: 5px;
                    background-color: rgb(236, 236, 236);
                }
                .send-btn{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-top: 4rem;
                    height: 4rem;
                    padding: 1rem 4rem;
                    border-radius: 5px;
                    width: fit-content;
                    background-color: rgb(25, 133, 210);
                    color: white;
                    cursor: pointer;
                    letter-spacing: 0.5rem;
                    font-size: 2rem;
                    user-select: none;
                }
                .send-btn:hover{
                    background-color: rgb(18, 102, 162);
                    transition: all 0.2s;
                }
                .send-btn:active{
                    background-color: rgb(10, 62, 99);
                    color: rgba(255, 255, 255, 0.8);
                    transition: all 0.2s;
                }
            }
        }

        .contact-ways{
            flex: 1;
            flex-shrink: 1;
            padding: 8rem 0 1rem 2rem;
            display: flex;
            flex-direction: column;
            // align-items: center;
            .logo{
                width: 60%;
                img{
                    width: 100%;
                }
            }

            .teles{
                margin-top: 4rem;
                .title{
                    font-size: 2rem;
                }
                .tele{
                    padding-left: 2rem;
                    font-size: 1.6rem;
                    margin-top: 1rem;
                }
            }

            .emails{
                margin-top: 4rem;
                .title{
                    font-size: 2rem;
                }
                .tele{
                    padding-left: 2rem;
                    font-size: 1.6rem;
                    margin-top: 1rem;
                }
            }
        }
    }
   }
   </style>
   